<template>
  <div class="dialog">
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="拍卖方式">
        <el-select v-model="params.auctionType">
          <el-option label="全部" value=""></el-option>
          <el-option label="固定价格" value="1"></el-option><el-option label="竞价模式" value="2"></el-option></el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="params.auctionFlag"><el-option label="全部" value=""></el-option>
          <el-option label="已开始" value="1"></el-option>
          <el-option label="已结束" value="2"></el-option></el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" style="margin-left: 100px">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading" size="small">
      <!-- @selection-change="handleSelectionChange" -->
      <!-- <el-table-column type="selection" width="55" :selectable="selectable">
      </el-table-column> -->
      <!-- <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="车辆图片">
              <div class="demo-image__lazy">
                <el-image v-for="url in props.row.carImages" :key="url" :src="url" lazy></el-image>
              </div>
            </el-form-item>
            <el-form-item label="车辆描述">
              <span>{{ props.row.carDesc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column> -->
      <el-table-column prop="id" label="序号" align="center" width="90"> </el-table-column>
      <el-table-column prop="auctionName" label="拍卖名称" align="center" width="150"></el-table-column>
      <el-table-column prop="flag" label="状态" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.auctionFlag == 0">
            <span style="color: #67C23A;">已开始</span>
          </template>
          <template v-if="scope.row.auctionFlag == 2">
            <span style="color: #FF0000;">已结束</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="bondMoney" label="保证金" align="center"></el-table-column>
      <el-table-column label="拍卖方式" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.auctionType == 1" style="color: #67C23A;">固定价格</span>
          <span v-if="scope.row.auctionType == 2" style="color: #67C23A;">竞价模式</span>
        </template>
      </el-table-column>
      <el-table-column label="拍卖显示时间" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.auctionType == 1 ? scope.row.viewTime : '竞价模式一直显示' }}
        </template>
      </el-table-column>
      <el-table-column label="拍卖时间" align="center" width="160">
        <template slot-scope="scope">
          起:{{ scope.row.config.startTime }} <br>止:{{ scope.row.config.endTime }}
        </template>
      </el-table-column>
      <el-table-column label="竞价金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.auctionType == 1 ? scope.row.carPrice : '--' }}
        </template>
      </el-table-column>
      <el-table-column label="起拍价" align="center">
        <template slot-scope="scope">
          {{ scope.row.auctionType == 2 ? scope.row.config.miniPrice : '--' }}
        </template>
      </el-table-column>
      <el-table-column label="竞价涨幅" align="center">
        <template slot-scope="scope">
          {{ scope.row.auctionType == 2 ? scope.row.config.addingPrice : '--' }}
        </template>
      </el-table-column>
      <el-table-column label="延时时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.auctionType == 2 ? scope.row.config.auctionDuration + '秒' : '--' }}
        </template>
      </el-table-column>
      <el-table-column label="竞价轮次" align="center">
        <template slot-scope="scope">
          {{ scope.row.auctionType == 2 ? scope.row.makePriceNum : '--' }}
        </template>
      </el-table-column>
      <el-table-column label="最后报价" align="center">
        <template slot-scope="scope">
          {{ scope.row.auctionType == 2 ? scope.row.newPrice : '--' }}
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" align="center" width="150"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="onEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="mini" @click="lookHistory(scope.row)">竞价记录</el-button>
          <el-button v-if="scope.row.isDel == 0"  type="danger" size="mini" @click="onDelete(scope.row)">删除</el-button>
          <el-button v-if="scope.row.isDel == 1"  type="danger" size="mini" @click="onDelete(scope.row)">取消删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="float: left; margin-top: 20px">
      <div>
        <span style="
            padding-top: 10px;
            display: inline-block;
            vertical-align: middle;
            color: #606266;
            font-size: 14px;
          ">显示第{{ this.params.page }}页的{{ this.params.rows }}条记录，总共{{
            this.total
          }}条记录
        </span>
      </div>
    </div>
    <div class="block" style="float: right; margin-top: 20px">
      <el-pagination :current-page.sync="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.rows" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <el-dialog :visible.sync="carImageVisible" title="评价详情" width="750px" center>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ evaDesc }}</span>
        </div>
        <div class="demo-image__lazy">
          <el-image v-for="url in evaImages" :key="url" :src="url" lazy></el-image>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="carImageVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="editShopVisible" title="设置拍卖规则" width="750px" center>
      <el-form :model="auctionData" ref="auctionForm" label-width="150px" :rules="auctionRules">
        <el-form-item label="拍卖标题:" prop="auctionName">
          <el-input v-model="auctionData.auctionName"></el-input>
        </el-form-item>
        <el-form-item label="参与保证金:" prop="bondMoney">
          <el-input v-model="auctionData.bondMoney"></el-input>
        </el-form-item>
        <el-form-item label="拍卖方式:">
          <el-select v-model="auctionData.auctionType"><el-option label="固定价格" :value="1"></el-option><el-option
              label="竞价模式" :value="2"></el-option></el-select>
        </el-form-item>
        <el-form-item label="拍卖显示时间:" v-if="auctionData.auctionType == 1">
          <el-date-picker type="datetime" placeholder="拍卖显示时间" v-model="auctionData.viewTime"
            value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="拍卖时间">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="拍卖开始时间" v-model="auctionData.config.startTime"
              value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2"> - </el-col>
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="拍卖结束时间" v-model="auctionData.config.endTime"
              value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="竞价金额:" v-if="auctionData.auctionType == 1">
          <el-input v-model="auctionData.carPrice"></el-input>
        </el-form-item>
        <template v-if="auctionData.auctionType == 2">
          <el-form-item label="起拍价:">
            <el-input v-model="auctionData.config.miniPrice"></el-input>
          </el-form-item>
          <el-form-item label="竞价涨幅:">
            <el-input v-model="auctionData.config.addingPrice"></el-input>
          </el-form-item>
          <el-form-item label="延时时间:">
            <el-input-number v-model="auctionData.config.auctionDuration" :min="10"></el-input-number>秒
          </el-form-item>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editShopVisible = false">关 闭</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="deleteVisible" title="提示" width="450px" center>
      <div class="del-dialog-cnt">
        {{ isdel == 0?"确认要删除记录？":"确认要恢复记录？" }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="logVisible" title="竞价记录" width="70%" center>
      <el-table :data="logTableData" border stripe style="width: 100%" size="small">
   
      <el-table-column prop="id" label="序号" align="center" width="90"> </el-table-column>
      <el-table-column prop="dealerName" label="车商" align="center" width="150"></el-table-column>
      <el-table-column label="保证金" align="center">
        <template slot-scope="scope">
          {{ scope.row.auctionInfo.bondMoney }}
        </template>
      </el-table-column>
      <el-table-column label="出价" prop="newPrice" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="150"></el-table-column>
      
    </el-table>
    <div class="block" style="float: left; margin-top: 20px">
      <div>
        <span style="
            padding-top: 10px;
            display: inline-block;
            vertical-align: middle;
            color: #606266;
            font-size: 14px;
          ">显示第{{ this.logParams.pageNo }}页的{{ this.params.pageSize }}条记录，总共{{
            this.logTotal
          }}条记录
        </span>
      </div>
    </div>
    <div class="block" style="float: right; margin-top: 20px">
      <el-pagination :current-page.sync="logParams.pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="logParams.pageSize" background
        layout="total, sizes, prev, pager, next, jumper" :total="logTotal" @size-change="handleLogSizeChange"
        @current-change="handleLogCurrentChange" />
    </div> 
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="logVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAuctionList, editAuction, delAuction, cancelDelAuction,  getAuctionDetail, updateAuctionStatus,getAuctionLogPageData
} from "@/api/carSource";
import {
  getBusinessList
} from "@/api/carBusiness";
import _ from 'lodash';
import { Message } from "element-ui";
export default {
  data() {
    return {
      loading: false,
      currentPage4: 4,
      total: 0,
      params: {
        auctionType: '',
        auctionFlag: ''
      },
      tableData: [],

      logParams: {
        pageSize: 10,
        pageNo: 1,
      },
      logTableData: [],
      logTotal: 0,
      logVisible:false,

      editShopVisible: false,
      modifyVisible: false,
      deleteVisible: false,
      isdel:0,
      brands: [],
      series: [],
      specs: [],
      auctionData: {
        auctionName: '',
        auctionFlag: 1,
        auctionType: 1,
        bondMoney: 0.01,
        carPrice: 0,
        viewTime: null,
        config: {
          addingPrice: 0,
          auctionDuration: 60,
          endTime: '',
          maxPrice: 0,
          miniPrice: 0,
          startTime: ''
        },
        packageId: '',
        id: 0
      },
      auctionRules: {
        auctionName: [
          { required: true, message: '请输入拍卖标题', trigger: 'blur' },
        ],
        bondMoney: [
          { required: true, message: '请输入参与保证金', trigger: 'blur' }
        ]
      },
      businessList: [],
      dialogImageUrl: '',
      dialogImageVisible: false,
      carImageVisible: false,
      evaImages: [],
      evaDesc: '',
      multipleSelection: [],
      packageVisible: false
    };
  },

  methods: {
    onSearch() {
      this.getData();
    },
    handleSizeChange(val) {
      this.params.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getData();
    },
    getData(exportExcel) {
      if (exportExcel) {
        this.params.export = true
      } else {
        this.loading = true;
        this.params.export = false
        let params = {
          pageSize: this.params.rows,
          pageNo: this.params.page,
          filter: [],
          orderType: 'desc',
          orderField: 'id'
        }
        if (this.params.auctionFlag != '') {
          params.filter.push({
            field: 'auctionFlag',
            operator: 'EQ',
            value: this.params.auctionFlag
          })
        }
        if (this.params.auctionType != '') {
          params.filter.push({
            field: 'auctionType',
            operator: 'EQ',
            value: this.params.auctionType
          })
        }
        getAuctionList(params).then((res) => {
          this.loading = false;
          this.total = res.data.total;
          // _.forEach(res.data.rows, function(value, key) {
          //   if(value.config && value.config.auctionDuration){
          //     value.config.auctionDuration = parseInt(value.config.auctionDuration)/60
          //   }
          // });
          this.tableData = res.data.rows;
        });
      }
    },
    onEdit(row) {
      this.resetStoreForm();
      this.editShopVisible = true;
      this.auctionData = _.cloneDeep(row)
      if (this.auctionData.config == null) this.auctionData.config = {}
    },
    onDelete(row) {
      this.deleteVisible = true;
      this.auctionData.id = row.id;
      this.isdel = row.isDel
    },
    handleEdit() {
      this.$refs['auctionForm'].validate((valid) => {
        if (valid) {
          if (this.auctionData.config.startTime == "" || this.auctionData.config.startTime == 0) {
            Message.info("请设置开始时间");
            return;
          }
          if (this.auctionData.config.endTime == "" || this.auctionData.config.endTime == 0) {
            Message.info("请设置结束时间");
            return;
          }
          if (this.auctionData.auctionType == 1) {
            if (this.auctionData.viewTime == "" || this.auctionData.viewTime == 0) {
              Message.info("请设置拍卖显示时间");
              return;
            }
            if (this.auctionData.carPrice == "" || this.auctionData.carPrice == 0) {
              Message.info("请设置竞价金额");
              return;
            }
          }

          if (this.auctionData.auctionType == 2) {
            if (this.auctionData.config.miniPrice == "" || this.auctionData.config.miniPrice == 0) {
              Message.info("请设置已拍价");
              return;
            }
            if (this.auctionData.config.addingPrice == "" || this.auctionData.config.addingPrice == 0) {
              Message.info("请设置竞价涨幅");
              return;
            }
            if (this.auctionData.config.auctionDuration == "" || this.auctionData.config.auctionDuration == 0) {
              Message.info("请设置延时周期");
              return;
            }
          }
          editAuction(this.auctionData).then((res) => {
            this.editShopVisible = false;
            this.getData();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleDelete() {
      if(this.isdel == 0){
        delAuction(this.auctionData.id).then((res) => {
          this.getData();
          this.deleteVisible = false;
        });
      }else{
        cancelDelAuction(this.auctionData.id).then((res) => {
          this.getData();
          this.deleteVisible = false;
        });
      }      
    },
    handleLogSizeChange(val) {
      this.logParams.pageSize = val;
      this.getLogData(this.logParams);
    },
    handleLogCurrentChange(val) {
      this.logParams.pageNo = val;
      this.getLogData(this.logParams);
    },
    lookHistory(row) {
      let params = {
          pageSize: this.logParams.pageSize,
          pageNo: this.logParams.pageNo,
          filter: [],
          orderType: 'desc',
          orderField: 'id'
        }
        params.filter.push({
            field: 'auctionId',
            operator: 'EQ',
            value: row.id
        })
        this.logParams = params
        this.getLogData(params)
    },
    getLogData(params){
      getAuctionLogPageData(params).then((res) => {
          this.logVisible = true;
          this.logTotal = res.data.total;
          this.logTableData = res.data.rows;
        });
    },
    resetStoreForm() {
      this.auctionData = {
        auctionName: '',
        auctionFlag: 0,
        auctionType: 1,
        bondMoney: 2000,
        carPrice: 0,
        viewTime: null,
        config: {
          addingPrice: 0,
          auctionDuration: 60,
          endTime: '',
          maxPrice: 0,
          miniPrice: 0,
          startTime: ''
        },
        packageId: '',
        id: 0
      }
    }
  },
  mounted() {
    this.getData();
  },
};
</script>
<style scoped lang="scss">
.my-radio {
  margin-bottom: 10px;
}

.dialog {
  width: 95%;
  height: 100%;
  padding-top: 10px;
  margin-left: 10px;
}
</style>
